<template>
	<view class="join_class">
		<view class="login">
			<image src="/static/jr.png" mode="widthFix"></image>
		</view>
		<view class="conete">
			<view class="title">输入口令，加入班级去闯关</view>
			<view class="msg">根据老师提供的班级口令，<br/>输入口令加入班级进行闯关作业</view>
			<view class="uplod">
				<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image :src="userInfo.avatar || '/static/yq.png'" mode="widthFix"></image>
				</button>
			</view>
			<view class="tex">头像 </view>
			<view class="us_itme">
				<view class="leb">姓名:</view>
				<input type="text" placeholder="请输入您的姓名" placeholder-class="pccoloe" v-model="userInfo.name"/>
			</view>
			<view class="us_itme">
				<view class="leb">年级:</view>
				<input type="text" placeholder="请选择您的班级" placeholder-class="pccoloe" @click="()=> show = true" v-model="baname"/>
				<u-picker mode="selector" v-model="show"  :range="selector_list" range-key="name" @confirm="confirm"></u-picker>
			</view>
			<view class="us_itme" style="background: rgba(231, 255, 201, 1);">
				<view class="leb">口令:</view>
				<input type="text" placeholder="请输入您的口令" placeholder-class="pccoloe" v-model="userInfo.pw"/>
			</view>
			<view class="btn" @click="AddJoin">
				加入班级
			</view>
		</view>
	</view>
</template>

<script>
	import { teamlist , jointeam } from '@/core/api/index.js'
	export default{
		data(){
			return{
				userInfo:{
					avatar:'',
					name:"",
					team_id:'',
					pw:''
				},
				urlimg:'',
				show:false,
				selector_list:[],
				baname:""
			}
		},
		onLoad() {
			this.urlimg = this.$imgurl	
			this.teamlist()
		},
		methods:{
			// 加入班级
		    async AddJoin(){
				const option = (title) =>{
					uni.showToast({
						title,
						icon:'none'
					})
				}
				if(this.userInfo.avatar == ''){
					option('请上传头像')
					return
				}
				if(this.userInfo.name == ''){
					option('请输入您的姓名')
					return
				}
				if(this.userInfo.team_id == ''){
					option('请选择您的班级')
					return
				}
				if(this.userInfo.pw == ''){
					option('请选择您的口令')
					return
				}
				const data = await jointeam(this.userInfo)
				if(data.code == 1){
					uni.showToast({
						title:data.msg,
					})
					uni.switchTab({
						url:'/pages/home/index'
					})
				}
				console.log(data)
			},
			// 确认班级
			confirm(e){
				console.log(e , this.selector_list[e])
				this.userInfo.team_id = this.selector_list[e].id
				this.baname = this.selector_list[e].name
			},
			// 获取班级列表
			async teamlist(){
				const { _data } = await teamlist()
				console.log(_data,'班级')
				this.selector_list = _data
			},
			chooseavatar(e){
				console.log(e.detail.avatarUrl)
				uni.uploadFile({
					url: this.urlimg + '/index.php/api/ajax/upload', // 服务器上传接口地址
					filePath: e.detail.avatarUrl,
					name: "file",
					header:{
						'Ba-User-Token' : uni.getStorageSync('_access_token')
					},
					name: 'file',
					success: uploadFileRes => {
						console.log(JSON.parse(uploadFileRes.data));
						let updata = JSON.parse(uploadFileRes.data)
						this.userInfo.avatar = this.urlimg + updata.data.file.url
						console.log(updata  , this.userInfo)
					}
				});
			},
		}
	}
</script>
<style>
	page{
		background-color: #86d9ff !important;
		height: 100vh;
	}
	.pccoloe{
		font-size: 24rpx;
		color: rgba(163, 157, 157, 1);
	}
	.pccolor{
	    color:#000;
	}
</style>
<style lang="scss" scoped>
	.join_class{
		.login{
			width: 224rpx;
			margin: 40rpx auto;
			image{
				width: 100%;
				height: auto;
			}
		}
		.conete{
			width: 604.73rpx;
			height: 901.16rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0 auto;
			position: relative;
			// padding: 40rpx 0;
			.title{
				width: 451.29rpx;
				height: 72.18rpx;
				opacity: 1;
				border-radius: 20rpx;
				background: rgba(255, 141, 26, 1);
				text-align: center;
				color: #fff;
				left: 50%;
				transform: translate(-50%,-50%);
				line-height: 72rpx;
				position: absolute;
				// margin: -20% auto;
			}
			.msg{
				padding-top: 70rpx;
				text-align: center;
				line-height: 42rpx;
				font-size: 24rpx;
				color: rgba(148, 148, 148, 1);
			}
			.uplod{
				width: 108.29rpx;
				// background: rgba(75, 163, 235, 1);
				height: 108.29rpx;
				margin:  15rpx auto;
				button{
				 	border: none;
					background: #fff;
					padding: 0 !important;
					width: 100%;
					height: 100%;
					text-align: right;
				}
				button::after{
					border: none !important;
				}
				image{
					width: 100%;
					border-radius: 50%;
					height: auto;
				}
			}
			.tex{
				color: rgba(189, 189, 189, 1);
                font-size: 24rpx;
				text-align: center;
			}
			.us_itme{
				display: flex;
				margin: 30rpx auto 0;
				width: 532.52rpx;
				align-items: center;
				color: rgba(163, 157, 157, 1);
				height: 86.61rpx;
				// opacity: 0.6;
				border-radius: 101rpx;
				background: rgba(234, 245, 255, 1);
				padding-left: 35rpx;
				input{
					padding-left: 20rpx;
					color: #000;
				}
			}
			.btn{
				width: 532.52rpx;
				height: 86.61rpx;
				opacity: 1;
				border-radius: 101rpx;
				background: linear-gradient(90deg, rgba(255, 223, 44, 1) 0%, rgba(254, 162, 2, 1) 100%);
				box-shadow: 0rpx 8rpx 40rpx  rgba(255, 144, 6, 0.6);
				text-align: center;
				line-height: 85rpx;
				margin: 70rpx auto;
				color: #fff;
			}
		}
	}
</style>